API Notifications

Contexte sécurisé: Cette fonctionnalité est uniquement disponible dans des contextes sécurisés (HTTPS), pour certains navigateurs qui la prennent en charge.

Note: Cette fonctionnalité est disponible via les Web Workers.

L'API Notifications permet aux pages web de contrôler l'affichage des notifications système. Celles-ci sont affichées en dehors de la fenêtre du contexte de navigation de plus haut niveau et peuvent donc être affichées, même lorsque la personne a changé d'onglet voire d'application. L'API est conçue pour être compatible avec les systèmes de notification existants sur les différentes plateformes.

Concepts et utilisation

Sur les plateformes prises en charge, l'affichage d'une notification système implique généralement deux choses.

Autoriser les notifications

Tout d'abord, il faut que l'origine actuelle soit autorisée à afficher des notifications système. Cela se fait généralement à l'initialisation du site ou de l'application à l'aide de la méthode Notification.requestPermission(). Cette demande d'autorisation doit faire suite à une action explicite de la personne, par exemple le clic sur un bouton :

js
btn.addEventListener("click", () => {
  let promise = Notification.requestPermission();
  // attendre l'autorisation
});

Il ne s'agit pas seulement d'une bonne pratique : il est nécessaire de respecter le consentement des personnes avant de leur envoyer des notifications. Les navigateurs interdiront explicitement les notifications qui ne sont pas déclenchées suite à une action explicite (c'est le cas de Firefox depuis la version 72 par exemple).

Lors de la demande d'autorisation, une boîte de dialogue apparaît dans le navigateur

Une boîte de dialogue demandant la permission d'envoyer des notifications depuis cette origine. Deux options sont présentes : toujours bloquer d'une part et autoriser d'autre part.

Ainsi, on peut choisir d'autoriser les notifications d'une origine donnée ou les bloquer. Une fois le choix effectué, le paramètre persistera généralement pour la session en cours.

Note : Pour Firefox, à partir de Firefox 44, les permissions pour les notifications et l'API Push ont été fusionnées. Ainsi, si on autorise les notifications, les messages et notifications push seront également autorisées.

Création de la notification

Ensuite, on peut créer une nouvelle notification à l'aide du constructeur Notification() auquel on passera un titre en argument et éventuellement un objet d'options afin de personnaliser la notification (la direction du texte, le corps du texte, l'icône à afficher, le son de notification à lire, etc).

En outre, la spécification de l'API Notifications spécifie un certain nombre d'ajouts à l'API ServiceWorker, qui permettent aux service worker de déclencher des notifications.

Note : Pour mieux savoir comment utiliser les notifications au sein de votre propre application, lisez Utiliser l'API Notifications.

Interfaces

Notification

Définit un objet représentant une notification.

NotificationEvent

Représente un évènement de notification diffusé sur la portée ServiceWorkerGlobalScope d'un ServiceWorker.

Ajouts aux autres interfaces

Évènement notificationclick

Se produit lors d'un clic sur une notification affichée.

Évènement notificationclose

Se produit lorsqu'une personne ferme une notification affichée.

ServiceWorkerRegistration.getNotifications()

Renvoie une liste de notifications dans l'ordre selon lequel elles ont été créées pour l'origine courante et pour la portée courante du service worker.

ServiceWorkerRegistration.showNotification()

Affiche la notification avec le titre indiqué.

Spécifications

Specification
Notifications API Standard

Compatibilité des navigateurs

api.Notification

BCD tables only load in the browser

api.ServiceWorkerRegistration.showNotification

BCD tables only load in the browser

api.ServiceWorkerRegistration.getNotifications

BCD tables only load in the browser

Voir aussi